<template>
    <div class="app-container">


        <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="first">


                <el-form class="search-form" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">

                    <el-form-item label="合同编号" prop="corporationTel">
                        <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="合同编号" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>

                    <el-form-item label="地区" prop="corporationTel">
                        <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="地区" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>

                    <el-form-item label="合同类型" prop="licensePeriod">
                        <el-select class="search-vitem" v-model="queryParams.licensePeriod" @change="handleQuery" clearable
                            filterable placeholder="合同类型">
                            <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                                结清证明
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="申请时间" prop="corporationName">
                        <el-date-picker class="search-vitem" v-model="queryParams.corporationName" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>



                    <div class="showline">

                    </div>


                    <div class="checkbox-list">
                        <div class="checkbox-item">
                            <div class="text">登记状态：</div>
                            <el-checkbox-group v-model="queryParams.corporationName" @change="handleQuery">
                                <el-checkbox label="全部"></el-checkbox>
                                <el-checkbox label="未使用"></el-checkbox>
                                <el-checkbox label="已使用"></el-checkbox>
                                <el-checkbox label="已作废"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="checkbox-item">
                            <div class="text">审核状态：</div>
                            <el-checkbox-group v-model="queryParams.corporationName" @change="handleQuery">
                                <el-checkbox label="全部"></el-checkbox>
                                <el-checkbox label="待审核"></el-checkbox>
                                <el-checkbox label="通过"></el-checkbox>
                                <el-checkbox label="驳回"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="showtext">
                        当前还有<span>5份</span> 借款合同、 <span>5份</span> 抵押合同、 <span>5份</span> 营业执照公证书未使用 <span>5份</span>
                        金融办批复公证书未使用
                    </div>




                </el-form>

                <el-row :gutter="10" class="mb8">

                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleOpen(4)"
                            v-hasPermi="['system:company:add']">使用登记</el-button>
                    </el-col>

                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleOpen(5)"
                            v-hasPermi="['system:company:add']">作废登记</el-button>
                    </el-col>

                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport"
                            v-hasPermi="['system:company:export']">导出</el-button>
                    </el-col>
                </el-row>

                <el-table v-loading="loading" :data="companyList" @selection-change="handleSelectionChange">
                    <el-table-column fixed="left" label="合同编号" width="180" align="center" prop="userId" />
                    <el-table-column label="材料类型" align="center" prop="companyName" />
                    <el-table-column label="地区" align="center" prop="creditCode" />
                    <el-table-column label="登记状态" width="150" align="center" prop="province" />
                    <el-table-column label="申请日期" width="150" align="center" prop="city" />
                    <el-table-column label="使用日期" align="center" prop="companyNature" />
                    <el-table-column label="关联单号" align="center" prop="companyNature" />
                    <el-table-column label="审核状态" align="center" prop="companyNature" />
                    <el-table-column label="操作人" align="center" prop="companyNature" />
                    <el-table-column label="操作" align="center" width="200" fixed="right"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:company:edit']">使用登记</el-button>
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:company:edit']">作废登记</el-button>
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:company:edit']">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" />






            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">


                <el-form class="search-form" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">

                    <el-form-item label="申请单号" prop="corporationTel">
                        <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="订单号" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="时间" prop="corporationName">
                        <el-date-picker class="search-vitem" v-model="queryParams.corporationName" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>

                    <div class="showline">

                    </div>


                    <div class="checkbox-list">
                        <div class="checkbox-item">
                            <div class="text">审核状态：</div>
                            <el-checkbox-group v-model="queryParams.corporationName" @change="handleQuery">
                                <el-checkbox label="全部"></el-checkbox>
                                <el-checkbox label="待审核"></el-checkbox>
                                <el-checkbox label="通过"></el-checkbox>
                                <el-checkbox label="驳回"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>





                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleOpen(1)"
                            v-hasPermi="['system:company:add']">申请材料</el-button>
                    </el-col>

                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleOpen(2)"
                            v-hasPermi="['system:company:add']">修改</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleOpen(3)"
                            v-hasPermi="['system:company:add']">查看</el-button>
                    </el-col>

                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport"
                            v-hasPermi="['system:company:export']">导出</el-button>
                    </el-col>
                </el-row>

                <el-table v-loading="loading" :data="companyList" @selection-change="handleSelectionChange">
                    <el-table-column fixed="left" label="申请号" width="180" align="center" prop="userId" />
                    <el-table-column label="申请状态" align="center" prop="companyName" />
                    <el-table-column label="材料类型" align="center" prop="creditCode" />
                    <el-table-column label="费用" width="150" align="center" prop="province" />
                    <el-table-column label="申请份数" width="150" align="center" prop="city" />
                    <el-table-column label="通过份数" align="center" prop="companyNature" />

                    <el-table-column label="小贷机构" align="center" prop="companyNature" />
                    <el-table-column label="受让方" align="center" prop="companyNature" />
                    <el-table-column label="申请人" align="center" prop="companyNature" />
                    <el-table-column label="申请时间" align="center" prop="companyNature" />

                    <el-table-column label="操作" align="center" width="200" fixed="right"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:company:edit']">修改</el-button>
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:company:edit']">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" />







            </el-tab-pane>
        </el-tabs>



        <!-- 弹出层 -->
        <el-dialog :title="materialsTitle" v-model="materialsOpen" width="1100px" append-to-body>
            <div class="dialog-custom">
                <!-- 申请材料 -->
                <div v-if="materialsType == 1" class="dialog-main">
                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>申请信息</span>
                        </div>
                        <div class="dialog-cont">
                            <el-form ref="materialsRef" :inline="true" :model="materialsForm" :rules="materialsRule"
                                label-width="100px">
                                <el-form-item label="材料类型：" prop="establishmentDate">
                                    <el-select class="search-vitem" v-model="queryParams.companyNature"
                                        @change="handleQuery" clearable filterable placeholder="材料类型">
                                        <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                                            待提交
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="小贷机构：" prop="establishmentDate">
                                    <el-select class="search-vitem" v-model="queryParams.companyNature"
                                        @change="handleQuery" clearable filterable placeholder="小贷机构">
                                        <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                                            待提交
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="受让方：" prop="establishmentDate">
                                    <el-select class="search-vitem" v-model="queryParams.companyNature"
                                        @change="handleQuery" clearable filterable placeholder="受让方">
                                        <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                                            待提交
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="使用地：" prop="establishmentDate">
                                    <el-date-picker class="search-vitem" clearable v-model="materialsForm.establishmentDate"
                                        type="date" value-format="YYYY-MM-DD" placeholder="使用地">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="申请份数：" prop="establishmentDate">
                                    <el-input-number v-model="materialsForm.establishmentDate" :min="1" :max="1000"
                                        label="申请份数"></el-input-number>
                                </el-form-item>
                                <el-form-item label="费用(元)：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        0
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请人：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请时间：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        2024-01-15 22:18:24
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>


                <!-- 修改 -->
                <div v-if="materialsType == 2" class="dialog-main">
                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>申请信息</span>
                        </div>
                        <div class="dialog-cont">
                            <el-form ref="materialsRef" :inline="true" :model="materialsForm" :rules="materialsRule"
                                label-width="100px">
                                <el-form-item label="材料类型：" prop="establishmentDate">
                                    <el-select class="search-vitem" v-model="queryParams.companyNature"
                                        @change="handleQuery" clearable filterable placeholder="材料类型">
                                        <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                                            待提交
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="小贷机构：" prop="establishmentDate">
                                    <el-select class="search-vitem" v-model="queryParams.companyNature"
                                        @change="handleQuery" clearable filterable placeholder="小贷机构">
                                        <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                                            待提交
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="受让方：" prop="establishmentDate">
                                    <el-select class="search-vitem" v-model="queryParams.companyNature"
                                        @change="handleQuery" clearable filterable placeholder="受让方">
                                        <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                                            待提交
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="使用地：" prop="establishmentDate">
                                    <el-date-picker class="search-vitem" clearable v-model="materialsForm.establishmentDate"
                                        type="date" value-format="YYYY-MM-DD" placeholder="使用地">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="申请份数：" prop="establishmentDate">
                                    <el-input-number v-model="materialsForm.establishmentDate" :min="1" :max="1000"
                                        label="申请份数"></el-input-number>
                                </el-form-item>
                                <el-form-item label="费用(元)：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        0
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请人：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请时间：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        2024-01-15 22:18:24
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>进度信息</span>
                        </div>
                        <div class="dialog-cont">
                            <div class="step">
                                <div class="step-item">
                                    <div class="content">
                                        <div>操作人：管理员</div>
                                        <div>备注：无</div>
                                        <div>2022-09-27 16:12:42</div><!----><!---->
                                    </div>
                                    <div class="bottom">
                                        <div class="text">驳回</div>
                                        <div class="round"></div>
                                        <div class="line"></div>
                                    </div>
                                </div>
                                <div class="step-item">
                                    <div class="content">
                                        <div>操作人：szzwjs_zd_admin</div>
                                        <div>备注：无</div>
                                        <div>2022-09-26 17:50:03</div><!----><!---->
                                    </div>
                                    <div class="bottom">
                                        <div class="text">待审核</div>
                                        <div class="round"></div>
                                        <div class="line"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 查看 -->
                <div v-if="materialsType == 3" class="dialog-main">
                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>申请信息</span>
                        </div>
                        <div class="dialog-cont">
                            <el-form ref="materialsRef" :inline="true" :model="materialsForm" :rules="materialsRule"
                                label-width="100px">
                                <el-form-item label="材料类型：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="小贷机构：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="受让方：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="使用地：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请份数：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="费用(元)：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        0
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请人：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请时间：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        2024-01-15 22:18:24
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>进度信息</span>
                        </div>
                        <div class="dialog-cont">
                            <div class="step">
                                <div class="step-item">
                                    <div class="content">
                                        <div>操作人：管理员</div>
                                        <div>备注：无</div>
                                        <div>2022-09-27 16:12:42</div><!----><!---->
                                    </div>
                                    <div class="bottom">
                                        <div class="text">驳回</div>
                                        <div class="round"></div>
                                        <div class="line"></div>
                                    </div>
                                </div>
                                <div class="step-item">
                                    <div class="content">
                                        <div>操作人：szzwjs_zd_admin</div>
                                        <div>备注：无</div>
                                        <div>2022-09-26 17:50:03</div><!----><!---->
                                    </div>
                                    <div class="bottom">
                                        <div class="text">待审核</div>
                                        <div class="round"></div>
                                        <div class="line"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 使用登记 -->
                <div v-if="materialsType == 4" class="dialog-main">
                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>借款信息</span>
                        </div>
                        <div class="dialog-cont">
                            <el-form ref="materialsRef" :inline="true" :model="materialsForm" :rules="materialsRule"
                                label-width="120px">
                                <el-form-item label="关联订单号：" prop="establishmentDate">
                                    <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="地区"
                                        clearable @keyup.enter="handleQuery" />
                                </el-form-item>
                                <el-form-item label="使用日期：" prop="establishmentDate">
                                    <el-date-picker class="search-vitem" clearable v-model="materialsForm.establishmentDate"
                                        type="date" value-format="YYYY-MM-DD" placeholder="使用地">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="主借人姓名：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="手机号：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="身份证号：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="借款金额(元)：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        0
                                    </div>
                                </el-form-item>
                                <el-form-item label="借款期限：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>

                            </el-form>
                        </div>
                    </div>

                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>材料信息</span>
                        </div>
                        <div class="dialog-cont">
                            <el-form ref="materialsRef" :inline="true" :model="materialsForm" :rules="materialsRule"
                                label-width="140px">
                                <el-form-item class="vvv2" label="纸质合同扫描件：" prop="establishmentDate">
                                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                        :on-change="handleChange" :file-list="fileList">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item class="vvv2" label="他项权证：" prop="establishmentDate">
                                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                        :on-change="handleChange" :file-list="fileList">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>

                            </el-form>
                        </div>
                    </div>




                </div>


                <!-- 作废登记 -->
                <div v-if="materialsType == 5" class="dialog-main">
                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>借款信息</span>
                        </div>
                        <div class="dialog-cont">
                            <el-form ref="materialsRef" :inline="true" :model="materialsForm" :rules="materialsRule"
                                label-width="120px">

                                <el-form-item label="合同编号：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="合同类型：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>
                                <el-form-item label="使用地区：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        szzwjs_zd_admin
                                    </div>
                                </el-form-item>

                            </el-form>
                        </div>
                    </div>

                    <div class="dialog-item">
                        <div class="dialog-tbox">
                            <span>快递信息</span>
                        </div>
                        <div class="dialog-cont">
                            <el-form ref="materialsRef" :model="materialsForm" :rules="materialsRule" label-width="140px">
                                <el-form-item class="vvv2" label="退费(元)：" prop="establishmentDate">
                                    <div class="search-vitem">
                                        50
                                    </div>
                                </el-form-item>
                                <el-form-item class="vvv2" label="快递单号：" prop="establishmentDate">
                                    <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="地区"
                                        clearable @keyup.enter="handleQuery" />
                                </el-form-item>
                                <el-form-item class="vvv2" label="作废原因：" prop="establishmentDate">
                                    <el-input type="textarea" :rows="6" class="search-vitem"
                                        v-model="queryParams.corporationTel" placeholder="地区" clearable
                                        @keyup.enter="handleQuery" />
                                </el-form-item>

                            </el-form>
                        </div>
                    </div>




                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="submitForm()">确 定</el-button>
                </div>
            </template>
        </el-dialog>


    </div>
</template>

<script setup name="Company">
import { listCompany, getCompany, addCompany } from "@/api/system/company";

const { proxy } = getCurrentInstance();

const companyList = ref([]);
const open = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const activeName = ref('first');

const materialsOpen = ref(false);
const materialsTitle = ref('');
const materialsType = ref(0);

const data = reactive({

    form: {}, // 基本详情
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
        creditCode: null,
        companyNature: null,
        licensePeriod: null,
        corporationName: null,
        corporationIdc: null,
        corporationTel: null,
        relationName: null,
        relationTel: null,
    },
    materialsForm: {},
    materialsRule: {
        establishmentDate: [
            { required: true, message: "结清日期不能为空", trigger: "blur" }
        ],
    },
    fileList: []

});

const { queryParams, form, materialsForm, materialsRule, fileList } = toRefs(data);

/** 查询公司信息列表 */
function getList() {
    loading.value = true;
    listCompany(queryParams.value).then(response => {
        companyList.value = response.rows;
        total.value = Number(response.total);
        loading.value = false;
    });
}




/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.userId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}



// 取消按钮
function cancel(type = 0) {
    materialsType.value = 0;
    materialsOpen.value = false;
    reset();
}

// 表单重置
function reset() {
    // 申请材料
    if (materialsType.value == 1) {
        materialsForm.value = {
            establishmentDate: null,
        };
        materialsTitle.value = "申请";
        proxy.resetForm("materialsRef");
    }
}

function handleOpen(type = 0) {
    materialsType.value = type
    reset(type);
    materialsOpen.value = true;
}

function submitForm(type = 0) {
    if (materialsType.value == 1) {
        proxy.$refs["materialsRef"].validate(valid => {
            if (valid) {
                addCompany(materialsForm.value).then(response => {
                    proxy.$modal.msgSuccess("提交成功");
                    materialsOpen.value = false;
                    getList();
                });
            }
        });
    }
}

// 创建结清证明




/** 导出按钮操作 */
function handleExport() {
    proxy.download('system/company/export', {
        ...queryParams.value
    }, `company_${new Date().getTime()}.xlsx`)
}

getList();
</script>

<style lang="scss">
.four-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .four-item {
        width: calc((100% - 30px) / 4);
        height: 112px;
        background: #FFF5EF;
        border-radius: 16px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .four-img {
            width: 68px;
            height: 68px;
            display: block;
            flex-shrink: 0;
            margin-right: 14px;
        }

        .four-cont {
            line-height: 1;

            .four-tt {
                color: #333333;
                font-size: 12px;

                .big1 {
                    font-weight: 550;
                    color: #FF7C2F;
                    font-size: 28px;
                    padding-right: 2px;
                }

                .big2 {
                    color: #FF7C2F;
                    font-size: 14px;
                    padding-right: 2px;
                }
            }

            .four-dd {
                color: #666666;
                font-size: 12px;
                margin-top: 6px;
            }
        }
    }
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 230px !important;
    }

    .showline {
        width: 100%;
        height: 8px;
        background: #f4f7fc;
        margin-bottom: 25px;
        margin-top: 10px;
    }



    .checkbox-list {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .checkbox-item {
            width: 50%;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
    }

    .showtext {
        width: 100%;
        font-size: 14px;
        margin-bottom: 15px;

        span {
            font-weight: 550;
            color: #FF6201;
        }
    }
}

.el-dialog__body {
    background: #f5f9ff;
    padding: 20px;
}

.dialog-custom {
    width: 100%;

    .dialog-main {
        width: 100%;

        .dialog-item {
            width: 100%;
            border-radius: 10px;
            background: #FFFFFF;
            overflow: hidden;


            &:not(:first-child) {
                margin-top: 20px;
            }

            .dialog-tbox {
                width: 100%;
                height: 48px;
                padding: 0 40px;
                font-size: 16px;
                font-weight: 550;
                border-bottom: 1px solid #e4efff;
                display: flex;
                align-items: center;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    left: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 3px;
                    height: 14px;
                    background: #FF6201;
                }
            }

            .dialog-cont {
                width: 100%;
                padding: 30px;
                box-sizing: border-box;
            }

            .step {
                display: flex;
                width: 100%;
                background: #f6faff;
                margin-bottom: 60px;

                .step-item {
                    position: relative;
                    padding: 15px 30px;
                    background: #f6faff;

                    .content {
                        color: #50565d;
                        width: 250px;

                        div {
                            margin-block: 5px;
                        }
                    }

                    .bottom {
                        position: absolute;
                        bottom: -35px;
                        width: 100%;

                        .text {
                            position: absolute;
                            top: 25px;
                            left: -13px;
                            width: 50px;
                            text-align: center;
                        }

                        .round {
                            width: 24px;
                            height: 24px;
                            background-color: #FF6201;
                            border-radius: 50%;
                        }

                        .line {
                            display: inline-block;
                            width: 100%;
                            height: 4px;
                            background-color: #FF6201;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            margin-right: 15px;
                        }
                    }
                }
            }

        }
    }


    .el-form-item {
        width: 30%;

        &.vvv2 {
            width: 35%;
        }

        .search-vitem {
            width: 220px !important;
        }
    }

}
</style>
